<template>
  <div class="head-wrap">
    <div class="head-content">
      <van-icon
        name="arrow-left"
        v-if="routerName"
        @click="toRouter"
        class="leftReturn"
      />
      <span class="title">{{ title }}</span>
      <div
        class="right-address"
        v-if="address"
        @click="$emit('to-addressModal')"
      >
        新增地址
      </div>
      <slot name="right"></slot>
    </div>
    <div class="black-radian" v-if="blackRadian"></div>
  </div>
</template>
<script>
import { Icon } from "vant";
export default {
  components: {
    [Icon.name]: Icon,
  },
  props: {
    routerName: {
      type: String,
      default: false,
    },
    title: {
      type: String,
    },
    address: {
      type: Boolean,
    },
    blackRadian: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    toRouter() {
      this.$emit("to-router");
      if (this.routerName !== "no") {
        this.$onBackPressed();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.head-wrap {
  position: relative;
  padding-top: 53px;
  text-align: center;
  background: #333333;
  .head-content {
    position: relative;
    line-height: 25px;
    height: 25px;
    color: #ffffff;
    padding-bottom: 6px;
    .leftReturn {
      position: absolute;
      top: 0;
      left: 0;
      padding-left: 19px;
      width: 24px;
      height: 25px;
      text-align: left;
      line-height: 25px;
      font-size: 24px;
      color: #fff;
    }
    .title {
      display: block;
      margin: 0 auto;
      font-size: 18px;
      font-weight: 500;
      max-width: 60%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .right-address {
      position: absolute;
      right: 18px;
      top: 0;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .black-radian {
    height: 17px;
    border-radius: 15px 15px 0px 0px;
    background: #ffffff;
  }
}
</style>